import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import Util from "../../utils/Util";
import { Tool } from "../../utils/Tool";
import * as DataName from "../../action/DataNameConfig";
import { setCommonSystemLoading } from "../../action/Action";
import { GetCashList, UpdateCash } from "../../action/ActionCash";
import { Radio, Card, Menu, List, Dropdown, Icon } from 'antd';
const RadioGroup = Radio.Group;
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: -1,
            ...DataName.CASH_LIST_FILTER
        }
        this.initData=(flag,page = 0,size = 10)=>{
            let { dispatch } = this.props;
            if(flag){
                dispatch(setCommonSystemLoading(DataName.BASE_CARD_LOADING,true));
            }
            dispatch(setCommonSystemLoading(DataName.BASE_TABLE_LOADING,true));
            let filter = {...this.state};
            filter.page = page;
            filter.size = size;
            filter.status = filter.value === -1?99:filter.value;
            dispatch(GetCashList({...filter}));
        }
        this.onChange=(e)=>{
            this.setState({
                value: e.target.value
            },()=>{
                this.initData(false);
            })
        }
        this.UpdateCash=(item,status)=>{
            let { dispatch, BaseData } = this.props;
            let cashList = BaseData[DataName.CASH_LIST] || {};
            dispatch(setCommonSystemLoading(DataName.BASE_TABLE_LOADING,true));
            dispatch(UpdateCash({status,cid: item.cid},{...cashList.filter}));
        }
    }
    componentWillMount(){
        Util.setMenuOpenKey(this.props,"cash");
        this.initData(true);
    }
    render() {
        let { BaseData, CommonSystem } = this.props;
        let cashList = BaseData[DataName.CASH_LIST] || {};
        const pagination = Util.paginationInit(cashList);
        const menu =(item)=> (
            <Menu>
                <Menu.Item>
                    <a onClick={()=>this.UpdateCash(item,1)}>已完成</a>
                </Menu.Item>
                <Menu.Item>
                    <a onClick={()=>this.UpdateCash(item,2)}>失败</a>
                </Menu.Item>
            </Menu>
        );
        return (
            <div className={"page-common"}>
                <Card title={"提现列表"} bordered={false} loading={CommonSystem[DataName.BASE_CARD_LOADING] || false}>
                    <div className={""} style={{paddingBottom: '20px'}}>
                        <RadioGroup onChange={this.onChange} value={this.state.value}>
                            <Radio value={-1}>全部</Radio>
                            <Radio value={0}>未完成</Radio>
                            <Radio value={1}>已完成</Radio>
                            <Radio value={2}>失败</Radio>
                        </RadioGroup>
                    </div>
                    <List
                        itemLayout="horizontal"
                        dataSource={cashList.content || []}
                        loading={CommonSystem[DataName.BASE_TABLE_LOADING] || false}
                        renderItem={item => (
                            <List.Item actions={[
                                <Dropdown overlay={menu(item)}>
                                    <Link>更新状态 <Icon type="down" /></Link>
                                </Dropdown>
                            ]}>
                                <List.Item.Meta
                                    avatar={
                                        <span>
                                            {item.status === 1?<span className={"tag-check"}>已完成</span>:""}
                                            {item.status === 0?<span className={"tag-check read"}>未完成</span>:""}
                                            {item.status === 2?<span className={"tag-check fail"}>失败</span>:""}
                                        </span>
                                    }
                                    title={<a href="https://ant.design">{item.desc}</a>}
                                    description={<div>
                                        用户：{item.toName}
                                    </div>}
                                />
                                <div style={{width: '300px'}}>
                                    姓名：{item.name}<br />
                                    银行卡号：{item.card_no}<br />
                                    开户行：{item.card_type}
                                </div>
                                <div style={{width: '160px',color: "#BD2E4C", fontSize: '24px'}}>￥{item.cashback.toString().slice(1)}</div>
                                <div style={{width: '200px'}}>{Tool.formatDateTime(item.create_time,1)}</div>
                            </List.Item>
                        )}
                        pagination={{
                            onChange: (current, pageSize)=>this.initData(false,current-1, pageSize),
                            onShowSizeChange: (current, pageSize)=>this.initData(false,current-1, pageSize),
                            ...pagination
                        }}
                    />
                </Card>
            </div>
        )
    }
}

export default connect(state=>({
    User: state.User,
    CommonSystem: state.CommonSystem,
    BaseData: state.BaseData
}))(Main);
